<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        div {
            margin: 0;
            height: 28px;
            width: 100px;
            line-height: 28px;
            text-align: center;
            font-size: 16px;
            border: 1px solid #cccccc;
        }
        
        ul {
            padding: 0;
            margin-top: 0px;
            display: none;
        }
        
        li {
            list-style: none;
            height: 28px;
            width: 100px;
            text-align: center;
            line-height: 28px;
            border: 1px solid #cccccc;
        }
        
        section {
            width: 204px;
            height: 120px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            /*justify-content: center;*/
        }
        
        p {
            margin: 0;
            padding: 0;
            text-align: center;
        }
    </style>
</head>

<body>
    <section>
        <div id="div3">
            <div id="div1">销售订单</div>
            <ul id="ul1">
                <li>订单1</li>
                <li>订单2</li>
                <li>订单3</li>
            </ul>
        </div>

        <div id="div4">
            <div id="div2">消费订单</div>
            <ul id="ul2">
                <li>消费1</li>
                <li>消费2</li>
                <li>消费3</li>
            </ul>
        </div>

    </section>
    <p></p>
</body>

</html>
<script>
    $('#div1').mouseenter(function () {
        $('#ul1').show()
    })
    $('#div3').mouseleave(function(){
        $('#ul1').hide()
    })

     $('#div2').mouseenter(function () {
        $('#ul2').show()
    })
    $('#div4').mouseleave(function(){
        $('#ul2').hide()
    })
// li标签鼠标悬浮事件
    $('li').hover(function(){
        $(this).css('background-color','#D3D3D3')
    },function(){
        $(this)
        .css('background-color','#fff')
    })
    // $('p').html(p)
    $('li').click(function(){
        console.dir($(this).text())
        $('p').text($(this).text())
        
    })
    

</script>